<template>
  <div class="video_page">
    <div class="top">
      <el-card>
        <div style="display: flex; align-items: center !important; width: 100%">
          <p style="margin-right: 20px">视频展示方式</p>
          <el-radio-group v-model="radio" @change="changeRadio">
            <el-radio :label="4">四分屏</el-radio>
            <el-radio :label="6">六分屏</el-radio>
            <el-radio :label="9">九分屏</el-radio>
          </el-radio-group>
        </div>
      </el-card>
    </div>
    <div class="bottom">
      <el-card class="b_tree" style="width: 20% !important">
        <el-tree
          show-checkbox
          :data="data"
          :props="defaultProps"
          @check="handleCheckChange"
        ></el-tree>
      </el-card>
      <el-card class="video_divs">
        <div class="container" v-show="radio === 4">
          <div class="item" v-for="i in 4" :key="i">
            <video width="100%" height="100%" controls autoplay muted loop>
              <source
                style="width: 100%; height: 100%; background: red"
                src="http://vjs.zencdn.net/v/oceans.mp4"
                type="video/mp4"
              />
            </video>
          </div>
        </div>
        <div class="six-grid" v-show="radio === 6">
          <div class="item" v-for="i in 6" :key="i">
            <video width="100%" height="100%" controls autoplay muted loop>
              <source
                src="http://vjs.zencdn.net/v/oceans.mp4"
                type="video/mp4"
              />
            </video>
          </div>
        </div>
        <div class="nine-grid" v-show="radio === 9">
          <div class="item" v-for="i in 9" :key="i">
            <video width="100%" height="100%" controls autoplay muted loop>
              <source
                src="http://vjs.zencdn.net/v/oceans.mp4"
                type="video/mp4"
              />
            </video>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
// import { useElementSize } from "@vueuse/core";

export default {
  data() {
    return {
      radio: 4,
      defaultProps: {
        children: "children",
        label: "label",
      },
      data: [
        {
          label: "一级 1",
          children: [
            {
              label: "二级 1-1",
              children: [
                {
                  label: "三级 1-1-1",
                },
              ],
            },
          ],
        },
        {
          label: "一级 2",
          children: [
            {
              label: "二级 2-1",
              children: [
                {
                  label: "三级 2-1-1",
                },
              ],
            },
            {
              label: "二级 2-2",
              children: [
                {
                  label: "三级 2-2-1",
                },
              ],
            },
          ],
        },
        {
          label: "一级 3",
          children: [
            {
              label: "二级 3-1",
              children: [
                {
                  label: "三级 3-1-1",
                },
              ],
            },
            {
              label: "二级 3-2",
              children: [
                {
                  label: "三级 3-2-1",
                },
              ],
            },
          ],
        },
      ],
    };
  },
  methods: {
    changeRadio(e) {
      console.log(e);
      console.log(this.radio);
    },
    handleCheckChange(data, checked) {
      let choose = checked.checkedNodes;
      let arr = [];
      for (let i = 0; i < choose.length; i++) {
        if (choose[i].children && choose[i].children.length) {
        } else {
          arr.push(choose[i]);
        }
      }
      console.log(arr);
    },
  },
  mounted() {
    // const { width, height } = useElementSize(this.videoDivsRefs);
    // console.log(width.value, height.value);
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-row {
  height: 100vh;
}
::v-deep .el-card,
::v-deep .el-col {
  // height: 100% !important;
}
::v-deep .el-card__body {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  width: 100% !important;
  padding: 10px !important;
}
::v-deep .el-tree-node__expand-icon {
  position: absolute;
  right: 0;
}

.video_page {
  padding: 20px;
  overflow: hidden;

  .top {
    margin-bottom: 20px;
  }
  .bottom {
    display: flex;
    // height: 100%;
    .b_tree {
      margin-right: 1%;
    }
    .video_divs {
      width: 90%;
      height: 100%;
      // 分屏
      .container {
        width: 100%;
        height: 68vh;

        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        .item {
          margin-right: 1%;
          margin-bottom: 1%;
          width: 45%;
          height: 48%;
          background: #000;
        }
      }

      .six-grid {
        width: 100%;
        height: 68vh;

        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        .item {
          margin-right: 1%;
          margin-bottom: 1%;
          width: 31%;
          height: 48%;
          background: #000;
        }
      }

      .nine-grid {
        width: 100%;
        height: 68vh;

        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        .item {
          margin-right: 1%;
          margin-bottom: 1%;
          width: 31%;
          height: 33%;
          background: #000;
        }
      }
    }
  }
}

.class4 {
  width: 48%;
  background: #000;
}
.class6 {
  width: 30%;
  height: 33%;
}
.item_div {
  margin: 0 10px 10px 0;
}
</style>
